<template>
  <div style="padding: 20px">
    <section id="statistics">
      <div class="top">
        <div class="left">
          <Icon type="ios-bookmark" style="vertical-align:middle" />
          <i>设备使用日志</i>
        </div>
        <div class="time">
          <DatePicker
            format="yyyy/MM/dd"
            placeholder="创建时间"
            type="daterange"
            show-week-numbers
            @on-change="dateChange"
            split-panels
            v-model="bloc.form.date"
            style="width: 200px;margin-right:5px"
          ></DatePicker>
        </div>
      </div>
      <div class="bottom">
        <Table
          border
          :loading="bloc.loading"
          :columns="columns2"
          highlight-row
          :data="bloc.paged.items"
        >
          <template slot-scope="{ row }" slot="action">
            <Button size="small" type="error" @click="removeItem(row)">
              删除
            </Button>
          </template>
          <slot name="footer" slot="footer">
            <Page
              show-elevator
              show-total
              show-sizer
              :total="bloc.paged.itemCount"
              :current="bloc.paged.pageIndex"
              :page-size="bloc.paged.pageSize"
              :page-size-opts="[15, 30, 50, 100]"
              @on-change="val=>bloc.load(val, bloc.paged.pageSize, this.affiliateId)"
              @on-page-size-change="val=>bloc.load(bloc.paged.pageIndex, val, this.affiliateId)"
            />
          </slot>
        </Table>
      </div>
    </section>
  </div>
</template>
<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';
  import {formatDate} from '@/base/util/Dates';
  import {MassageLogBloc} from '@/view/member/bloc/MassageLogBloc';
  import {DeviceUse} from '@/base/model/DeviceUse';

  @Component({
    components: {}
  })
  export default class extends Vue {
    @Prop(Number) affiliateId!: number;
    columns2 = [
      {
        title: 'ID',
        key: 'id',
        align: 'left',
        minWidth: 160,
        tooltip: true
      },
      {
        title: '昵称',
        key: 'nickname',
        align: 'left',
        minWidth: 100,
        tooltip: true
      },
      {
        title: '关联电话',
        key: 'phone',
        align: 'left',
        minWidth: 100,
        tooltip: true
      },
      {
        title: '模式名称',
        key: 'modeName',
        align: 'left',
        minWidth: 100,
        tooltip: true
      },
      {
        title: '使用时长',
        key: 'lifetime',
        align: 'left',
        minWidth: 100,
        tooltip: true
      },
      {
        title: '创建时间',
        align: 'left',
        render: (h: any, params: any) => {
          return h('span', {
            domProps: {
              innerText: formatDate(new Date(params.row.created), 'yyyy-MM-dd hh:mm:ss')
            }
          });
        },
        minWidth: 160,
        tooltip: true
      },
      {
        title: '操作',
        slot: 'action',
        width: (47 * 1) + (61 * 0) + (75 * 0) + 20,
        align: 'left',
        tooltip: true
      }
    ];
    bloc: MassageLogBloc = new MassageLogBloc();

    dateChange() {
      this.bloc.load(1, 15, this.affiliateId).catch(e => {
        this.$Message.error('操作错误');
      });
    }

    removeItem(dataItem: DeviceUse) {
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除后将无法恢复！还要继续吗？',
        okText: '删除',
        cancelText: '取消',
        onOk: () => {
          this.bloc.removeItem(dataItem).then(value => {
            this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize, this.affiliateId);
          }).then(() => {
            this.$Message.success('删除成功');
          }).catch(e => {
            this.$Message.error('删除失败');
          });
        }
      });
    }

    mounted() {
      this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize, this.affiliateId).catch(e => {
        this.$Message.error('操作错误');
      });
    }
  }
</script>
<style lang="less" scoped>
  #statistics {
    .top {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      margin-left: 20px;

      i {
        font-size: 20px;
      }

      .time {
        float: right;
        margin-right: 210px;
      }
    }
  }
</style>

